import React, { useState } from 'react';
import { Space, Card } from 'antd';
import { Checkbox } from '../index';

const App: React.FC = () => {
  const [normalChecked1, setNormalChecked1] = useState(false);
  const [normalChecked2, setNormalChecked2] = useState(true);
  const [normalChecked3, setNormalChecked3] = useState(false);

  const [hoverChecked1, setHoverChecked1] = useState(false);
  const [hoverChecked2, setHoverChecked2] = useState(true);
  const [hoverChecked3, setHoverChecked3] = useState(false);

  const [activeChecked1, setActiveChecked1] = useState(false);
  const [activeChecked2, setActiveChecked2] = useState(true);
  const [activeChecked3, setActiveChecked3] = useState(false);

  return (
    <Space direction="vertical" size="large" style={{ width: '100%' }}>
      {/* Normal 状态 */}
      <Card title="Normal（正常状态）" size="small">
        <Space>
          <Checkbox checked={normalChecked1} onChange={(e) => setNormalChecked1(e.target.checked)}>
            未选中
          </Checkbox>
          <Checkbox checked={normalChecked2} onChange={(e) => setNormalChecked2(e.target.checked)}>
            选中
          </Checkbox>
          <Checkbox
            checked={normalChecked3}
            indeterminate={!normalChecked3}
            onChange={(e) => setNormalChecked3(e.target.checked)}
          >
            半选中
          </Checkbox>
        </Space>
      </Card>

      {/* Hover 状态提示 */}
      <Card title="Hover（悬浮状态）" size="small">
        <div style={{ marginBottom: 8, color: '#999', fontSize: 12 }}>
          💡 将鼠标移动到多选框上，查看悬浮效果
        </div>
        <Space>
          <Checkbox checked={hoverChecked1} onChange={(e) => setHoverChecked1(e.target.checked)}>
            未选悬停
          </Checkbox>
          <Checkbox checked={hoverChecked2} onChange={(e) => setHoverChecked2(e.target.checked)}>
            选中
          </Checkbox>
          <Checkbox
            checked={hoverChecked3}
            indeterminate={!hoverChecked3}
            onChange={(e) => setHoverChecked3(e.target.checked)}
          >
            半选中
          </Checkbox>
        </Space>
      </Card>

      {/* Active 状态提示 */}
      <Card title="Active（激活状态）" size="small">
        <div style={{ marginBottom: 8, color: '#999', fontSize: 12 }}>
          💡 点击多选框时查看激活效果
        </div>
        <Space>
          <Checkbox checked={activeChecked1} onChange={(e) => setActiveChecked1(e.target.checked)}>
            未选中项
          </Checkbox>
          <Checkbox checked={activeChecked2} onChange={(e) => setActiveChecked2(e.target.checked)}>
            选中项
          </Checkbox>
          <Checkbox
            checked={activeChecked3}
            indeterminate={!activeChecked3}
            onChange={(e) => setActiveChecked3(e.target.checked)}
          >
            半选中
          </Checkbox>
        </Space>
      </Card>

      {/* Disable 状态 */}
      <Card title="Disabled（禁用状态）" size="small">
        <Space>
          <Checkbox disabled>未选失效项</Checkbox>
          <Checkbox checked disabled>
            选中失效项
          </Checkbox>
          <Checkbox indeterminate disabled>
            半选中
          </Checkbox>
        </Space>
      </Card>
    </Space>
  );
};

export default App;

